<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<body>
	<canvas id="mycanvas" width="500px" height="500px" style="border:1px solid #ccc"></canvas>

</body>
</html>

<script type="text/javascript">
	var canvas = document.getElementById("mycanvas");
	var context = canvas.getContext("2d");
	var g = context.createRadialGradient(80,60,5,80,60,50)
	/*（80,60...60,50）是简单的太阳画法；(70,50,5,90,60,100)[这个是方框里有圆形渐变];最后的100是半径，内圆与外圆有一定的偏离*/
	g.addColorStop(0,"red");
	g.addColorStop(1,"white");
	context.fillStyle = g;
	context.fillRect(10,10,150,100)
	context.strokeRect(10,10,150,100)/*加边框*/
</script>